<template>
  <rect
    :rx="HANDLE_RADIUS"
    :ry="HANDLE_RADIUS"
    fill="#4F80FF"
    :x="innerCenterX - HANDLE_SIZE / 2"
    :y="innerCenterY - HANDLE_SIZE / 2"
    :width="HANDLE_SIZE"
    :height="HANDLE_SIZE"
    stroke="rgba(255,255,255,0.8)"
    stroke-width="4"
  />
  <!-- 占位 透明 使可操作区域更大 -->
  <rect
    rx="0"
    ry="0"
    fill="rgba(0,0,0,0)"
    :x="innerCenterX - HOLDER_SIZE / 2"
    :y="innerCenterY - HOLDER_SIZE / 2"
    :width="HOLDER_SIZE"
    :height="HOLDER_SIZE"
    stroke-width="0"
    :style="{ cursor }"
    v-bind="$attrs"
  />
</template>
<script setup lang="ts">
import { computed, CSSProperties } from "vue";

const props = withDefaults(
  defineProps<{
    x?: number;
    y?: number;
    centerX?: number;
    centerY?: number;
    cursor?: CSSProperties["cursor"];
  }>(),
  {
    cursor: "move",
  }
);

const HANDLE_SIZE = 12;
const HANDLE_RADIUS = 5;
const HOLDER_SIZE = HANDLE_SIZE + 10;
const innerCenterX = computed(() => {
  if (props.x !== undefined) {
    return props.x + HANDLE_SIZE / 2;
  }
  return props.centerX as number;
});
const innerCenterY = computed(() => {
  if (props.y !== undefined) {
    return props.y + HANDLE_SIZE / 2;
  }
  return props.centerY as number;
});
</script>
